<template>
  <div class="canvas-wrapper">
    <!-- 添加全屏按钮 -->
    <div
      class="fullscreen-btn"
      @click="toggleFullscreen"
      :title="isFullscreen ? '退出全屏' : '全屏显示'"
    >
      <el-icon :size="20">
        <component :is="isFullscreen ? 'Aim' : 'FullScreen'" />
      </el-icon>
      <span class="btn-text">{{ isFullscreen ? "退出" : "全屏" }}</span>
    </div>

    <div class="canvas-container" ref="canvasRef">
      <!--每个模块 -->
      <!--top -->
      <div
        class="module"
        :style="[
          getStyle(0, -20, 1624, 172, 1),
          { left: '50%', transform: 'translateX(-50%)' },
        ]"
      >
        <top1Animation />
      </div>

      <!-- 22N皮带 -->
      <div class="module" :style="getStyle(60, 80, 300, 150, 20)">
        <Belt2_2_N
          :runEarth="NamePD_22_N_GEN('RUNSts_DI').value"
          :speed="
            NamePD_22_N_GEN('BeltSpeed_AI', operator.Divide, 1000, 2).value
          "
          :status="act.PD_22N.communication_status"
        />
      </div>

      <div :style="getStyle(0, 0, 120, 120, 199)">
        <TransparentTrigger
          :points="[
            [108, 215],
            [88, 160],
            [335, 72],
            [350, 125],
          ]"
          popupPath="Belt2_2_N"
          popupName="2_2南部皮带"
          @openPopup="handleOpenPopup"
        />
      </div>
      <div
        class="module"
        :style="getStyle(50, 165, 30, 30, 80)"
        v-if="NamePD_22_N_GEN('HNWarn_DI').value"
      >
        <trumpet :runEarth="NamePD_22_N_GEN('HNWarn_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(50, 165, 30, 30, 80)"
        v-if="NamePD_22_N_GEN('CtrlReset_DO').value"
      >
        <alram :runEarth="NamePD_22_N_GEN('CtrlReset_DO').value" />
      </div>
      <div
        :style="getStyle(30, 140, 120, 120, 999)"
        v-if="NamePD_22_N_GEN('CtrlReset_DO').value"
      >
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt2_2_Nalram"
          popupName="2_2南部皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(10, 128, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(10, 128, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt2_2_NJK"
          popupName="2_2南部皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(350, 86, 30, 30, 20)">
        <Bridge1 />
      </div>

      <!-- 22皮带 -->
      <div class="module" :style="getStyle(360, 72, 400, 170, 19)">
        <Belt2_2
          :runEarth="NamePD_22_GEN('RUNSts_DI').value"
          :speed="NamePD_22_GEN('BeltSpeed_AI', operator.Divide, 1000, 2).value"
          :status="act.PD_22.communication_status"
        />
      </div>

      <div :style="getStyle(40, -10, 120, 120, 99)">
        <TransparentTrigger
          :points="[
            [395, 130],
            [390, 180],
            [675, 235],
            [685, 190],
          ]"
          popupPath="Belt2_2"
          popupName="2_2大巷皮带"
          @openPopup="handleOpenPopup"
        />
      </div>
      <div
        class="module"
        :style="getStyle(390, 140, 30, 30, 80)"
        v-if="NamePD_22_GEN('HNWarn_DI').value"
      >
        <trumpet :runEarth="NamePD_22_GEN('HNWarn_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(390, 140, 30, 30, 80)"
        v-if="NamePD_22_GEN('Alarm_DI').value"
      >
        <alram :runEarth="NamePD_22_GEN('Alarm_DI').value" />
      </div>

      <div
        :style="getStyle(370, 115, 120, 120, 999)"
        v-if="NamePD_22_GEN('Alarm_DI').value"
      >
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt2_2alram"
          popupName="2_2大巷皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(380, 58, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(380, 58, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt2_2JK"
          popupName="2_2大巷皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <!-- 22煤仓 -->
      <div class="module" :style="getStyle(757, 178, 40, 40, 20)">
        <Crusher :runEarth="NamePD_22_GEN('CrusherStatusRunState_DI').value" />
      </div>
      <div class="module" :style="getStyle(795, 191, 25, 25, 20)">
        <pump :runEarth="NamePD_22_GEN('LubPumpStatusRunState_DI').value" />
      </div>
      <div class="module" :style="getStyle(725, 186, 120, 120, 18)">
        <Bunker2_2 />
      </div>
      <div class="module" :style="getStyle(860, 166, 310, 155, 18)">
        <CoalMessage2_2 />
      </div>
      <div class="module" :style="getStyle(880, 211, 25, 70, 30)">
        <CoalLevel
          :level="NamePD_22_GEN('CoalBunker_AI', operator.Divide, 0.4, 2).value"
        />
      </div>
      <div class="module" :style="getStyle(735, 269, 50, 50, 16)">
        <Feeder :runEarth="act.run" />
      </div>
      <div class="module" :style="getStyle(785, 280, 50, 50, 17)">
        <Feeder :runEarth="act.run" />
      </div>
      <div class="module" :style="getStyle(732, 266, 120, 120, 15)">
        <FeederBelt />
      </div>

      <div :style="getStyle(40, -10, 120, 120, 999)">
        <TransparentTrigger
          :points="[
            [690, 190],
            [690, 320],
            [800, 320],
            [800, 190],
          ]"
          popupPath="Bunker2_2"
          popupName="2-2煤仓"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(820, 128, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(820, 128, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt2_2BunkJK"
          popupName="2_2煤仓给煤机监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <!-- 3-1皮带 -->
      <div class="module" :style="getStyle(695, 280, 400, 170, 14)">
        <Belt3_1
          :runEarth="NamePD_31_GEN('RUNSts_DI').value"
          :speed="NamePD_31_GEN('BeltSpeed_AI', operator.Divide, 1000, 2).value"
          :status="act.PD_31.communication_status"
        />
      </div>

      <div :style="getStyle(0, -20, 120, 120, 999)">
        <TransparentTrigger
          :points="[
            [1040, 402],
            [1040, 456],
            [765, 400],
            [765, 346],
          ]"
          popupPath="Belt3_1"
          popupName="3-1大巷皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(725, 345, 30, 30, 80)"
        v-if="NamePD_31_GEN('HNWarn_DI').value"
      >
        <trumpet :runEarth="NamePD_31_GEN('HNWarn_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(725, 345, 30, 30, 80)"
        v-if="act.run"
      >
        <alram :runEarth="act.run" />
      </div>

      <div :style="getStyle(705, 320, 120, 120, 999)" v-if="act.run">
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt3_1alram"
          popupName="3_1大巷皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(650, 288, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(650, 288, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt3_1JK"
          popupName="3_1大巷皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <!-- 3-1煤仓 -->
      <div class="module" :style="getStyle(1045, 390, 120, 120, 13)">
        <Bunker3_1 />
      </div>
      <div class="module" :style="getStyle(1180, 350, 310, 155, 18)">
        <CoalMessage3_1 />
      </div>
      <div class="module" :style="getStyle(1200, 395, 25, 70, 30)">
        <CoalLevel
          :level="NamePD_31_GEN('CoalBunker_AI', operator.Divide, 0.4, 2).value"
        />
      </div>

      <div class="module" :style="getStyle(1055, 473, 50, 50, 11)">
        <Feeder :runEarth="act.run" />
      </div>

      <div class="module" :style="getStyle(1105, 484, 50, 50, 12)">
        <Feeder :runEarth="act.run" />
      </div>
      <div class="module" :style="getStyle(1052, 470, 120, 120, 10)">
        <FeederBelt />
      </div>

      <div :style="getStyle(0, -20, 120, 120, 999)">
        <TransparentTrigger
          :points="[
            [1095, 405],
            [1095, 445],
            [1055, 445],
            [1055, 535],
            [1160, 555],
            [1160, 405],
          ]"
          popupPath="Bunker3_1"
          popupName="3-1煤仓"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1140, 338, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(1140, 338, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt3_1BunkJK"
          popupName="3_1煤仓给煤机监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <!-- 4-2-N皮带 -->
      <div class="module" :style="getStyle(160, 360, 300, 150, 11)">
        <Belt4_2_N
          :runEarth="NamePD_42_N_GEN('RUNSts_DI').value"
          :speed="
            NamePD_42_N_GEN('BeltSpeed_AI', operator.Divide, 1000, 2).value
          "
          :status="act.PD_42N.communication_status"
        />
      </div>

      <div :style="getStyle(105, 275, 120, 120, 999)">
        <TransparentTrigger
          :points="[
            [108, 215],
            [88, 160],
            [335, 72],
            [350, 125],
          ]"
          popupPath="Belt4_2_N"
          popupName="4-2南部皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(150, 445, 30, 30, 80)"
        v-if="NamePD_42_N_GEN('HNWarn_DI').value"
      >
        <trumpet :runEarth="NamePD_42_N_GEN('HNWarn_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(150, 445, 30, 30, 80)"
        v-if="act.run"
      >
        <alram :runEarth="act.run" />
      </div>

      <div :style="getStyle(130, 420, 120, 120, 999)" v-if="act.run">
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt4_2_Nalram"
          popupName="4_2南部皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(110, 400, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(110, 400, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt4_2_NJK"
          popupName="4_2南部皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(450, 366, 30, 30, 20)">
        <Bridge1 />
      </div>

      <!-- 4-2-2皮带 -->
      <div class="module" :style="getStyle(460, 350, 400, 170, 10)">
        <Belt4_2_2
          :runEarth="NamePD_42_2_GEN('RUNSts_DI').value"
          :speed="
            NamePD_42_2_GEN('HNProtectSpeed_AI', operator.NO, undefined, 2).value
          "
          :status="act.PD_42_2.communication_status"
        />
      </div>

      <div :style="getStyle(-20, -40, 120, 120, 999)">
        <TransparentTrigger
          :points="[
            [830, 545],
            [555, 490],
            [570, 440],
            [840, 495],
          ]"
          popupPath="Belt4_2_2"
          popupName="4-2-2部皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(495, 420, 30, 30, 80)"
        v-if="NamePD_42_2_GEN('HNWarn_DI').value"
      >
        <trumpet :runEarth="NamePD_42_2_GEN('HNWarn_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(495, 420, 30, 30, 80)"
        v-if="act.run"
      >
        <alram :runEarth="act.run" />
      </div>

      <div :style="getStyle(475, 395, 120, 120, 999)" v-if="act.run">
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt4_2_2alram"
          popupName="4_2 2部皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(490, 340, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(490, 340, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt4_2_1JK"
          popupName="4_2 1部皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(845, 456, 40, 40, 12)">
        <bridge />
      </div>

      <!-- 4-2-1皮带 -->
      <div class="module" :style="getStyle(865, 453, 400, 170, 9)">
        <Belt4_2_1
          :runEarth="NamePD_42_GEN('RUNSts_DI').value"
          :speed="NamePD_42_GEN('BeltSpeed_AI', operator.Divide, 1000, 2).value"
          :status="act.PD_42_1.communication_status"
        />
      </div>

      <div :style="getStyle(170, 150, 120, 120, 99)">
        <TransparentTrigger
          :points="[
            [1040, 402],
            [1040, 456],
            [765, 400],
            [765, 346],
          ]"
          popupPath="Belt4_2_1"
          popupName="4-2-1部皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(895, 520, 30, 30, 80)"
        v-if="NamePD_42_GEN('HNWarn_DI').value"
      >
        <trumpet :runEarth="NamePD_42_GEN('HNWarn_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(895, 520, 30, 30, 80)"
        v-if="NamePD_42_GEN('Alarm_DI').value"
      >
        <alram :runEarth="NamePD_42_GEN('Alarm_DI').value" />
      </div>

      <div
        :style="getStyle(875, 495, 120, 120, 999)"
        v-if="NamePD_42_GEN('Alarm_DI').value"
      >
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt4_2_1alram"
          popupName="4_2 1部皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(890, 440, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(890, 440, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt4_2_1JK"
          popupName="4_2 1部皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <!-- 4-2煤仓 -->
      <div class="module" :style="getStyle(1215, 563, 120, 120, 8)">
        <Bunker4_2 />
      </div>
      <div class="module" :style="getStyle(1350, 543, 310, 155, 18)">
        <CoalMessage4_2 />
      </div>
      <div class="module" :style="getStyle(1370, 588, 25, 70, 30)">
        <CoalLevel
          :level="NamePD_42_GEN('CoalBunker_AI', operator.Divide, 0.4, 2).value"
        />
      </div>

      <div class="module" :style="getStyle(1225, 646, 50, 50, 6)">
        <Feeder :runEarth="act.run" />
      </div>

      <div class="module" :style="getStyle(1275, 657, 50, 50, 7)">
        <Feeder :runEarth="act.run" />
      </div>
      <div class="module" :style="getStyle(1222, 643, 120, 120, 10)">
        <FeederBelt />
      </div>

      <div :style="getStyle(170, 150, 120, 120, 99)">
        <TransparentTrigger
          :points="[
            [1095, 405],
            [1095, 445],
            [1055, 445],
            [1055, 535],
            [1160, 555],
            [1160, 405],
          ]"
          popupPath="Bunker4_2"
          popupName="4-2煤仓"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1300, 510, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(1300, 510, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt4_2BunkJK"
          popupName="4_2煤仓给煤机监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <!-- 5-2-N皮带 -->
      <div class="module" :style="getStyle(388, 549, 300, 150, 7)">
        <Belt5_2_N
          :runEarth="NamePD_52_N_GEN('RUNSts_DI').value"
          :speed="
            NamePD_52_N_GEN('BeltSpeed_AI', operator.Divide, 1000, 2).value
          "
          :status="act.PD_52N.communication_status"
        />
      </div>

      <div :style="getStyle(445, 630, 120, 120, 99)">
        <TransparentTrigger
          :points="[
            [-65, 10],
            [230, -100],
            [230, -30],
            [-65, 80],
          ]"
          popupPath="Belt5_2_N"
          popupName="5-2南部皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(375, 635, 30, 30, 80)"
        v-if="NamePD_52_N_GEN('HNWarn_DI').value"
      >
        <trumpet :runEarth="NamePD_52_N_GEN('HNWarn_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(375, 635, 30, 30, 80)"
        v-if="act.run"
      >
        <alram :runEarth="act.run" />
      </div>

      <div :style="getStyle(355, 610, 120, 120, 999)" v-if="act.run">
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt5_2_Nalram"
          popupName="5_2 南部皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(335, 595, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(335, 595, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt5_2_NJK"
          popupName="5_2南部皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(680, 553, 30, 30, 6)">
        <Bridge1 />
      </div>

      <!-- 5-2-2皮带 -->
      <div class="module" :style="getStyle(690, 535, 400, 170, 5)">
        <Belt5_2_2
          :runEarth="NamePD_52_2_GEN('RUNSts_DI').value"
          :speed="
            NamePD_52_2_GEN('BeltSpeed_AI', operator.NO, undefined, 2).value
          "
          :status="act.PD_52_2.communication_status"
        />
      </div>

      <div :style="getStyle(210, 145, 120, 120, 99)">
        <TransparentTrigger
          :points="[
            [860, 555],
            [490, 480],
            [490, 420],
            [860, 495],
          ]"
          popupPath="Belt5_2_2"
          popupName="5-2-2部皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(725, 605, 30, 30, 80)"
        v-if="NamePD_52_2_GEN('HNWarn_DI').value"
      >
        <trumpet :runEarth="NamePD_52_2_GEN('HNWarn_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(725, 605, 30, 30, 80)"
        v-if="act.run"
      >
        <alram :runEarth="act.run" />
      </div>

      <div :style="getStyle(705, 580, 120, 120, 999)" v-if="act.run">
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt5_2_2alram"
          popupName="5_2 2部皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(715, 525, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(715, 525, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt5_2_2JK"
          popupName="5_2 2部皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1075, 642, 40, 40, 12)">
        <bridge />
      </div>

      <!-- 5-2-1皮带 -->
      <div class="module" :style="getStyle(1095, 635, 400, 170, 4)">
        <Belt5_2_1
          :runEarth="NamePD_52_GEN('RUNSts_DI').value"
          :speed="NamePD_52_GEN('BeltSpeed_AI', operator.Divide, 1000, 2).value"
          :status="act.PD_52_1.communication_status"
        />
      </div>

      <div :style="getStyle(620, 250, 120, 120, 99)">
        <TransparentTrigger
          :points="[
            [860, 555],
            [490, 480],
            [490, 420],
            [860, 495],
          ]"
          popupPath="Belt5_2_1"
          popupName="5-2-1部皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(1130, 705, 30, 30, 80)"
        v-if="NamePD_52_GEN('HNWarn_DI').value"
      >
        <trumpet :runEarth="NamePD_52_GEN('HNWarn_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(1130, 705, 30, 30, 80)"
        v-if="NamePD_52_GEN('Alarm_DI').value"
      >
        <alram :runEarth="NamePD_52_GEN('Alarm_DI').value" />
      </div>

      <div
        :style="getStyle(1110, 680, 120, 120, 999)"
        v-if="NamePD_52_GEN('Alarm_DI').value"
      >
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt5_2_1alram"
          popupName="5_2 1部皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1115, 625, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(1115, 625, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt5_2_1JK"
          popupName="5_2 1部皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1480, 742, 40, 40, 12)">
        <bridge />
      </div>

      <!-- 主井皮带 -->
      <div class="module" :style="getStyle(1495, 735, 400, 170, 3)">
        <BeltMain
          :runEarth="NamePD_Main('LocalStop_DI').value"
          :speed="
            NamePD_Main_GEN('BeltSpeed_AI', operator.Divide, 1000, 2).value
          "
          :status="act.PD_ZJ.communication_status"
        />
      </div>

      <div :style="getStyle(1030, 345, 120, 120, 99)">
        <TransparentTrigger
          :points="[
            [550, 460],
            [560, 415],
            [850, 475],
            [840, 520],
          ]"
          popupPath="BeltMain"
          popupName="主井皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(1550, 755, 30, 30, 80)"
        v-if="NamePD_Main_GEN('HNWarn_DI').value"
      >
        <trumpet :runEarth="NamePD_Main_GEN('HNWarn_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(1550, 755, 30, 30, 80)"
        v-if="act.run"
      >
        <alram :runEarth="act.run" />
      </div>

      <div :style="getStyle(1530, 730, 120, 120, 999)" v-if="act.run">
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="BeltMainalram"
          popupName="主井皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1515, 715, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(1515, 715, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="BeltMainJK"
          popupName="主井皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1880, 860, 22, 22, 6)">
        <Bridge2 />
      </div>

      <div class="module" :style="getStyle(1235, 775, 670, 170, 4)">
        <Belt101
          :runEarth="NamePD_101_GEN('BeltRunSts_DI').value"
          :speed="
            NamePD_101_GEN('BeltSpeed_AI', operator.Divide, 1000, 2).value
          "
          :status="act.PD_101.communication_status"
        />
      </div>

      <!-- 101皮带 -->
      <div :style="getStyle(1040, 410, 120, 120, 99)">
        <TransparentTrigger
          :points="[
            [350, 470],
            [350, 420],
            [650, 455],
            [650, 505],
          ]"
          popupPath="Belt101"
          popupName="101皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(1370, 855, 30, 30, 80)"
        v-if="NamePD_101_GEN('HNWarning_101Belt_DI').value"
      >
        <trumpet :runEarth="NamePD_101_GEN('HNWarning_101Belt_DI').value" />
      </div>

      <div
        class="module"
        :style="getStyle(1370, 855, 30, 30, 80)"
        v-if="NamePD_101_GEN('SystemFault_DI').value"
      >
        <alram :runEarth="NamePD_101_GEN('SystemFault_DI').value" />
      </div>

      <div
        :style="getStyle(1350, 830, 120, 120, 999)"
        v-if="NamePD_101_GEN('SystemFault_DI').value"
      >
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt101alram"
          popupName="101皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1315, 845, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(1315, 845, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt101JK"
          popupName="101皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1235, 870, 40, 20, 4)">
        <Bridge1h
          :runEarth="act.run"
          :status="act.PD_104_105.communication_status"
        />
      </div>

      <!-- 104皮带 -->
      <div class="module" :style="getStyle(890, 862, 325, 60, 3)">
        <Belt104
          :runEarth="NamePD_104('Belt104InvRunSts_DI').value"
          :speed="NamePD_101_GEN('StatusBeltSpeed_104Belt_AI', operator.Divide, 1000, 2).value"
          :status="act.PD_104_105.communication_status"
        />
      </div>

      <div :style="getStyle(710, 410, 120, 120, 99)">
        <TransparentTrigger
          :points="[
            [220, 520],
            [220, 470],
            [480, 470],
            [480, 520],
          ]"
          popupPath="Belt104"
          popupName="104皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(910, 900, 30, 30, 80)"
        v-if="act.run"
      >
        <alram :runEarth="act.run" />
      </div>

      <div :style="getStyle(890, 875, 120, 120, 999)" v-if="act.run">
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt104alram"
          popupName="104皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1015, 935, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(1015, 935, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt104JK"
          popupName="104皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1205, 840, 45, 25, 4)">
        <Bridge2h
          :runEarth="act.run"
          :status="act.PD_104_105.communication_status"
        />
      </div>

      <!-- 105皮带 -->
      <div class="module" :style="getStyle(520, 822, 680, 60, 3)">
        <Belt105
          :runEarth="NamePD_104('Belt105InvRunSts_DI').value"
          :speed="NamePD_101_GEN('StatusBeltSpeed_105Belt_AI', operator.Divide, 1000, 2).value"
          :status="act.PD_104_105.communication_status"
        />
      </div>

      <div :style="getStyle(510, 340, 120, 120, 99)">
        <TransparentTrigger
          :points="[
            [190, 520],
            [190, 470],
            [500, 470],
            [500, 520],
          ]"
          popupPath="Belt105"
          popupName="105皮带"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div
        class="module"
        :style="getStyle(680, 810, 30, 30, 80)"
        v-if="act.run"
      >
        <alram :runEarth="act.run" />
      </div>

      <div :style="getStyle(660, 785, 120, 120, 999)" v-if="act.run">
        <TransparentTrigger
          :points="[
            [20, 55],
            [20, 25],
            [50, 25],
            [50, 55],
          ]"
          popupPath="Belt105alram"
          popupName="105皮带报警"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(625, 785, 40, 40, 20)">
        <Camera />
      </div>
      <div :style="getStyle(625, 785, 100, 100, 199)">
        <TransparentTrigger
          :points="[
            [0, 35],
            [0, 0],
            [35, 0],
            [35, 35],
          ]"
          popupPath="Belt105JK"
          popupName="105皮带监控"
          @openPopup="handleOpenPopup"
        />
      </div>

      <div class="module" :style="getStyle(1190, 820, 50, 25, 4)">
        <Bridge3h
          :runEarth="act.run"
          :status="act.PD_104_105.communication_status"
        />
      </div>

      <!-- 1#原煤仓 -->
      <div class="module" :style="getStyle(1180, 930, 120, 120, 1)">
        <Bunker1
          :level="
            NamePD_104_GEN('MainPageCoalBin1Level_AI', operator.NO, undefined, 2)
              .value
          "
        />
      </div>
      <div class="module" :style="getStyle(1222, 960, 35, 60, 3)">
        <CoalLevel
          :level="
            NamePD_104_GEN('MainPageCoalBin1Level_AI', operator.Divide, 0.4, 2)
              .value
          "
        />
      </div>

      <!-- 2#原煤仓 -->
      <div class="module" :style="getStyle(800, 905, 120, 120, 1)">
        <Bunker2
          :level="
            NamePD_104_GEN('MainPageCoalBin2Level_AI', operator.NO, undefined, 2).value
          "
        />
      </div>
      <div class="module" :style="getStyle(842, 935, 35, 60, 3)">
        <CoalLevel
          :level="
            NamePD_104_GEN('MainPageCoalBin2Level_AI', operator.Divide, 0.4, 2).value
          "
        />
      </div>

      <!-- 3#原煤仓 -->
      <div class="module" :style="getStyle(420, 870, 120, 120, 1)">
        <Bunker3
          :level="
            NamePD_104_GEN('MainPageCoalBin3Level_AI', operator.NO, undefined, 2).value
          "
        />
      </div>

      <div class="module" :style="getStyle(462, 900, 35, 60, 3)">
        <CoalLevel
          :level="
            NamePD_104_GEN('MainPageCoalBin3Level_AI', operator.Divide, 0.4, 2).value
              
          "
        />
      </div>

      <div class="module" :style="getStyle(1460, 90, 420, 240, 18)">
        <Belt101Message />
      </div>
      <!-- <div class="module" :style="getStyle(230, 880, 310, 155, 18)">
        <CoalMessage101 />
      </div> -->
      <!-- 透明窗体 -->
    </div>

    <!-- 弹窗显示 -->

    <TechModal
      v-if="popupVisible"
      :visible="popupVisible"
      :title="popupTitle"
      :componentName="popupComponent"
      @close="popupVisible = false"
    />
  </div>
</template>

<script setup lang="ts">
import { act } from "../utils/websocket";
import {
  NamePD_52_N_GEN,
  NamePD_52_2,
  NamePD_52_2_GEN,
  NamePD_52_GEN,
  NamePD_42_N_GEN,
  NamePD_42_2_GEN,
  NamePD_42_GEN,
  NamePD_31_GEN,
  NamePD_22_GEN,
  NamePD_22_N_GEN,
  NamePD_101_GEN,
  NamePD_104,
  NamePD_104_GEN,
  NamePD_104_PT_104_GEN,
  NamePD_Main_GEN,
  NamePD_Main,
} from "../utils/beltPositioningMethod";
import { operator } from "@/utils/op_enums";
const currentLevel2_2 = computed(
  () => NamePD_22_GEN("CoalBunker_AI", operator.Divide, 200, 2).value
);
const currentLevel3_1 = computed(() => act.speed);
// const currentLevel4_2 = ref(10.2);
const currentLevel4_2 = computed(() => NamePD_42_GEN("CoalBunker_AI").value);
const currentLevel1 = computed(() => act.speed);
const currentLevel2 = computed(() => act.speed);
const currentLevel3 = computed(() => act.speed);

import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import type { CSSProperties } from "vue";
import CoalMessage2_2 from "./windows/CoalMessage2_2.vue";
import CoalMessage3_1 from "./windows/CoalMessage3_1.vue";
import CoalMessage4_2 from "./windows/CoalMessage4_2.vue";
import Belt101Message from "./windows/BeltMessage.vue";
//顶

import top1Animation from "./svgEditing/top/topAnimation.vue";
import Belt2_2_N from "./svgEditing/elements/Belt/Belt2_2_N.vue";
import Belt2_2 from "./svgEditing/elements/Belt/Belt2_2.vue";
import Belt3_1 from "./svgEditing/elements/Belt/Belt3_1.vue";
import Belt4_2_N from "./svgEditing/elements/Belt/Belt4_2_N.vue";
import Belt4_2_2 from "./svgEditing/elements/Belt/Belt4_2_2.vue";
import Belt4_2_1 from "./svgEditing/elements/Belt/Belt4_2_1.vue";
import Belt5_2_N from "./svgEditing/elements/Belt/Belt5_2_N.vue";
import Belt5_2_2 from "./svgEditing/elements/Belt/Belt5_2_2.vue";
import Belt5_2_1 from "./svgEditing/elements/Belt/Belt5_2_1.vue";
import BeltMain from "./svgEditing/elements/Belt/BeltMain.vue";
import Belt101 from "./svgEditing/elements/Belt/Belt101.vue";
// import Belt104 from "./svgEditing/elements/Belt/Belt104.vue";
// import Mountain from "./svgEditing/MountainAnimation.vue";
import Belt104 from "./svgEditing/elements/Belt/Belt104.vue";
import Belt105 from "./svgEditing/elements/Belt/Belt105.vue";
import bridge from "./svgEditing/elements/Belt/bridge.vue";
import Bridge1 from "./svgEditing/elements/Belt/bridge1.vue";
import Bridge2 from "./svgEditing/elements/Belt/bridge2.vue";
import Bridge1h from "./svgEditing/elements/Belt/bridge1h.vue";
import Bridge2h from "./svgEditing/elements/Belt/bridge2h.vue";
import Bridge3h from "./svgEditing/elements/Belt/bridge3h.vue";
//煤仓
import Bunker2_2 from "./svgEditing/elements/Bunker/Bunker2_2.vue";
import Bunker3_1 from "./svgEditing/elements/Bunker/Bunker3_1.vue";
import Bunker4_2 from "./svgEditing/elements/Bunker/Bunker4_2.vue";
import Bunker1 from "./svgEditing/elements/Bunker/Bunker1.vue";
import Bunker2 from "./svgEditing/elements/Bunker/Bunker2.vue";
import Bunker3 from "./svgEditing/elements/Bunker/Bunker3.vue";
import Crusher from "./svgEditing/elements/Bunker/Crusher.vue";
import pump from "./svgEditing/elements/Bunker/pump.vue";
import Feeder from "./svgEditing/elements/Bunker/Feeder.vue";
import FeederBelt from "./svgEditing/elements/Bunker/FeederBelt.vue";
import CoalLevel from "./CoalLevel.vue";
import alram from "./svgEditing/alram/alram.vue";
import trumpet from "./svgEditing/alram/trumpet.vue";
import Camera from "./svgEditing/elements/Camera.vue";
//透明窗体
import TransparentTrigger from "./windows/TransparentTrigger.vue";

//弹窗
import TechModal from "./windows/TechModal.vue";

//网络拓扑

//log
import KXlog from "./svgEditing/elements/Log/KXlog.vue";

// import { FullScreen, Aim } from "@element-plus/icons-vue";
const canvasRef = ref<HTMLElement>();

/*  ------------小全屏------------ */
import useAppStore from "@/store/modules/app";

const appStore = useAppStore();
const isFullscreen = ref(appStore.isFullscreen);

const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value;
  // 调用store方法控制布局显示
  appStore.setFullscreenMode(isFullscreen.value);
};

/* ---------大全屏---------- */
// const isFullscreen = ref(false);

// // 真正的全屏切换（会隐藏浏览器UI）
// const toggleFullscreen = async () => {
//   try {
//     if (!document.fullscreenElement) {
//       // 进入全屏（针对画布容器）
//       await canvasRef.value?.requestFullscreen();
//       isFullscreen.value = true;
//     } else {
//       // 退出全屏
//       if (document.exitFullscreen) {
//         await document.exitFullscreen();
//         isFullscreen.value = false;
//       }
//     }
//   } catch (err) {
//     console.error("全屏错误:", err);
//   }
// };

// // 监听全屏状态变化（例如用户按ESC退出）
// onMounted(() => {
//   document.addEventListener("fullscreenchange", () => {
//     isFullscreen.value = !!document.fullscreenElement;
//   });
// });

// onBeforeUnmount(() => {
//   document.removeEventListener("fullscreenchange");
// });

// --------------------全屏 END------------------------

const popupVisible = ref(false);
const popupComponent = ref("");
const popupTitle = ref("");

const handleOpenPopup = (path: string, name: string) => {
  popupComponent.value = path;
  popupTitle.value = name;
  popupVisible.value = true;
};
// 固定画布设计尺寸
const DESIGN_WIDTH = 1920;
const DESIGN_HEIGHT = 1080;

// const canvasRef = ref<HTMLDivElement | null>(null);

const scaleCanvas = () => {
  const el = canvasRef.value;
  if (!el) return;

  const windowRatio = window.innerWidth / window.innerHeight;
  const designRatio = DESIGN_WIDTH / DESIGN_HEIGHT;

  let scale: number;
  let offsetX = 0;
  let offsetY = 0;

  if (windowRatio > designRatio) {
    // 屏幕更宽，以高度为准缩放，左右居中
    scale = window.innerHeight / DESIGN_HEIGHT;
    offsetX = (window.innerWidth - DESIGN_WIDTH * scale) / 2;
  } else {
    // 屏幕更高，以宽度为准缩放，上下居中
    scale = window.innerWidth / DESIGN_WIDTH;
    offsetY = (window.innerHeight - DESIGN_HEIGHT * scale) / 2;
  }

  el.style.transform = `scale(${scale}) translate(${offsetX / scale}px, ${
    offsetY / scale
  }px)`;
  el.style.transformOrigin = "top left";
  el.style.width = `${DESIGN_WIDTH}px`;
  el.style.height = `${DESIGN_HEIGHT}px`;
};

onMounted(() => {
  scaleCanvas();
  console.log("++++++++++++++++++",act.PD_22.communication_status)
  window.addEventListener("resize", scaleCanvas);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", scaleCanvas);
});

const getStyle = (
  x: number,
  y: number,
  w: number,
  h: number,
  zIndex = 1
): CSSProperties => ({
  position: "absolute",
  left: `${x}px`,
  top: `${y}px`,
  width: `${w}px`,
  height: `${h}px`,
  overflow: "visible",
  zIndex, // 这里加入 zIndex
});
</script>

<style scoped>
.canvas-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #141c2e;
}

.canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  /* 不设置宽高，由 JS 动态赋值 */
}
.module {
  /* border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0,0,0,0.2); */
}

/* 全屏 */
.fullscreen-btn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 9999;
  cursor: pointer;
  background: #3373b6;
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.fullscreen-btn:hover {
  background: #1e61a9; /* 深一点的蓝色 */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.fullscreen-btn:active {
  transform: translateY(0);
}

.btn-text {
  font-size: 14px;
  font-weight: 500;
}

/* 全屏模式下的按钮样式调整 */
.canvas-wrapper.fullscreen .fullscreen-btn {
  right: 40px;
  bottom: 40px;
  background: rgba(42, 141, 83, 0.8); /* 半透明谷歌蓝 */
}
</style>
